<template>
  <uni-popup :custom="true" type="bottom" ref="Keyboar">
    <view class="KeyboarBody">
    <!--  <view @tap="close" class="dowmImgBx">
        <view class="dowmImg"></view>
      </view> -->
      <view class="KeyboarBx">
        <view v-for="(num , index) in keyboardNum " :key='index' @tap="clickBoard(num)" hover-class="hover"
          :hover-stay-time='20' class="keyboar">
          {{num}}
        </view>
        <view @tap="clickBoard(otherNum)" :class="['keyboar',otherNum==''?'empty':'']" :hover-stay-time='20' hover-class="hover">{{otherNum}}</view>
        <view @tap="clickBoard('0')" hover-class="hover" :hover-stay-time='20' class="keyboar">0</view>
        <view @tap="deleteKeyboar()" class="keyboar keyboarflex" :hover-stay-time='20' hover-class="hover">
          <view class="keyboarDel"></view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
  // import uniPopup from "@/components/uni-popup/uni-popup"
  export default {
    components: {
      // uniPopup
    },
    props: {
      //限制输入框的长度 空值不限制
      psdLength: {
        type: [Number, String],
        default: ''
      },
      //键盘码
      keyboardNum: {
        type: [Array, Object],
        default: () => {
          return [1, 2, 3, 4, 5, 6, 7, 8, 9]
        }
      },
      //特殊键盘码 .或者X  默空
      otherNum: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        password: '', //要返回的结果
        iptNum: [], //输入的内容
        KeyboarHid: true, //键盘影藏和显示
      }
    },
    created() {
          setTimeout(()=>{console.log("this.psdLength：",this.psdLength)},2000)
    },
    methods: {
      open() {
        this.$refs.Keyboar.open();
      },
      close() {
        this.$refs.Keyboar.close();
      },
      // 密码框
      clickBoard(num) {
        if (num == '') return;
       
        let iptNum = this.iptNum;
        //判断是否限制长度
        if (this.psdLength!='') {
         if (iptNum.length >=this.psdLength) {return};
          this.iptNum.push(num);
          this.returnVal()
        } else {
           this.iptNum.push(num);
          this.returnVal()
        }
      },
      //重置 清空
      reset() {
        this.iptNum = [];
        this.returnVal()
      },
      //删除
      deleteKeyboar() {
        if (this.password == '') {
          return
        }
        this.iptNum.pop();
        this.returnVal()
      },

      //处理返回值
      returnVal() {
        let str = '';
        for (let i = 0; i < this.iptNum.length; i++) {
          str += this.iptNum[i];
        }
        this.password = str;
        this.$emit("input", str)
      }
    }
  }
</script>

<style scoped>
  .KeyboarBody {
    /*  position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99; */
    /* 注释的样式 如果不依赖 uniPopup需要打开，否则不需要*/
    background-color: #FFFFFF;
  }

  .KeyboarBx {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    background-color:rgba(3,3,3,0.1);
    padding:10rpx  6rpx 0rpx 6rpx;
     margin-left: -12rpx;
  }


  .keyboar {
    width: 20%;
    flex-grow: 1;
    padding: 3%;
    font-size: 40rpx;
    background-color: #FFFFFF;
    border-radius: 10rpx;
    margin-left: 12rpx;
    margin-bottom: 10rpx;
  }

  .dian {
    margin-top: -10rpx;
  }

  .keyboarBtn {
    background: linear-gradient(45deg, rgba(242, 131, 9, 1) 0%, rgba(230, 36, 15, 1) 100%);
    color: #fff;
  }

  .hover {
    background: #ebedf0;
  }


  .bot {
    bottom: 0;
  }

  .empty {
    background-color: #EEEEEE;
  }

  .dowmImgBx {
    display: flex;
    justify-content: center;
    border-top: 1rpx solid A1A1A1;
  }

  .dowmImg {
    width: 35rpx;
    height: 35rpx;
    margin-bottom: 10rpx;
    background: url('');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
  }

  .keyboarDel {
    width: 50rpx;
    height: 36rpx;
    margin-bottom: 10rpx;
    background-image: url('');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    margin-top: 11rpx;

  }

  .keyboarflex {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /deep/ .uni-popup__wrapper-box {
    padding: 0rpx !important;
    background-color: transparent;
  }
</style>
